import { View, Text, Image } from '@tarojs/components'
import Taro, { useDidShow, useLoad } from '@tarojs/taro'
// import { useTabBarStore } from '@/store/store'
import { useState } from 'react'
import './index.scss'

export default function User() {

  const [userInfo, setUserInfo] = useState<any>({})
  const [showContact, setShowContact] = useState(false)
  // const { setActive } = useTabBarStore();

  useLoad(() => {
    console.log('Page loaded.');
    if (!Taro.getStorageSync('token')) {
      // setActive(0)
      Taro.switchTab({
        url: '/pages/Home/index'
      });
    }
  })

  useDidShow(async () => {
    if (!Taro.getStorageSync('token')) {
      return;
    }
    Taro.showLoading({
      title: '加载中...',
      mask: true // 显示透明蒙层，防止触摸穿透
    })
    const info = await Taro.getUserInfo();
    setUserInfo(info.userInfo);
    Taro.hideLoading();
  })


  const onClickPath = (type: number) => {

    switch (type) {
      case 1:
        Taro.navigateTo({
          url: '/pages/Manual/index'
        })
        break;
      case 2:
        Taro.navigateTo({
          url: '/pages/Protocol/index'
        })
        break;
      case 3:
        // Taro.navigateTo({
        //   url: '/pages/Contact/index'
        // })
        setShowContact(true)
        break;
      case 4:
        {
          // TOTO 清除登录信息
          // setActive(0);
          Taro.eventCenter.trigger('logout');
          Taro.removeStorageSync('token');
          Taro.switchTab({
            url: '/pages/Home/index',
          })
          
        }
        break;
    
      default:
        break;
    }
  }

  const onClickClose = () => {
    setShowContact(false)
  }

  return (
    <View className='page min-h-screen flex flex-col relative' style={{
      background: 'line-gradient(180deg, #FFFFFF 0%, #0077FF 12%, #57A5FF 100%)',
      border: 'none'
    }}>
      <View
        className='pt-[30px]'
      >
        <View className='h-[88px] text-center text-[#FFFFFF] text-[40px]'>
          个人主页
        </View>
        <View className='flex flex-col items-center justify-center'>
          <Image src={require('./images/avatar.png')} className='w-[266px] h-[254px] rounded-[133px] overflow-hidden' />
          <View className='text-white text-[40px] leading-[40px] mt-4'>{userInfo?.nickName}</View>
        </View>
      </View>
      <View className='flex-1 mt-4 bg-white rounded-t-[40px] p-[30px] overflow-hidden'>
        <View
          onClick={() => onClickPath(1)}
          className='px-[36px] py-[40px] flex flex-row items-center justify-between border-[2px] border-solid border-[#ECF0F4] box-border rounded-[24px] overflow-hidden'>
          <View className='flex flex-row items-center'>
            <Image src={require('./images/protocol.png')} className='w-[32px] h-[32px]' />
            <Text className='text-black text-[32px] font-medium ml-2'>使用手册</Text>
          </View>
          <Image src={require('./images/arrow.png')} className='w-[18px] h-[31px]' />
        </View>
        <View
          onClick={() => onClickPath(2)}
          className='mt-2 px-[36px] py-[40px] flex flex-row items-center justify-between border-[2px] border-solid border-[#ECF0F4] box-border rounded-[24px] overflow-hidden'>
          <View className='flex flex-row items-center'>
            <Image src={require('./images/permission.png')} className='w-[32px] h-[32px]' />
            <Text className='text-black text-[32px] font-medium ml-2'>用户隐私条款协议</Text>
          </View>
          <Image src={require('./images/arrow.png')} className='w-[18px] h-[31px]' />
        </View>
        <View
          onClick={() => onClickPath(3)}
          className='mt-2 px-[36px] py-[40px] flex flex-row items-center justify-between border-[2px] border-solid border-[#ECF0F4] box-border rounded-[24px] overflow-hidden'>
          <View className='flex flex-row items-center'>
            <Image src={require('./images/contact.png')} className='w-[32px] h-[32px]' />
            <Text className='text-black text-[32px] font-medium ml-2'>联系我们</Text>
          </View>
          <Image src={require('./images/arrow.png')} className='w-[18px] h-[31px]' />
        </View>
        <View
          onClick={() => onClickPath(4)}
          className='mt-2 px-[36px] py-[40px] flex flex-row items-center justify-between border-[2px] border-solid border-[#ECF0F4] box-border rounded-[24px] overflow-hidden'>
          <View className='flex flex-row items-center'>
            <Image src={require('./images/logout.png')} className='w-[32px] h-[32px]' />
            <Text className='text-black text-[32px] font-medium ml-2'>退出登录</Text>
          </View>
          <Image src={require('./images/arrow.png')} className='w-[18px] h-[31px]' />
        </View>
      </View>
      {
        showContact &&
        <View className='absolute z-10 left-0 right-0 bottom-0 top-0 bg-[rgba(0,0,0,0.4)] flex flex-col justify-center items-center'>
          <View className='w-[640px] h-[240px] rounded-2xl px-3 py-4 bg-white relative flex items-center justify-center'>
            <Image
              onClick={onClickClose}
              src={require('./images/close.png')}
              className='absolute top-4 right-4 w-[30px] h-[30px]' />
            <View>联系电话: 17850966717</View>
          </View>
        </View >
      }
    </View>
  )
}
